<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-cloak>
        <h1>{{message}}</h1>
        <h1>{{message}}</h1>
        <h1>{{message}}</h1>
    </div>
</div>
<script src="../js/vue.js"></script>
<script>
    /*
    v-cloak指令：
        用于隐藏尚未完成编译的 DOM 模板。
        无需传入
        详细信息
            该指令只在没有构建步骤的环境下需要使用。
            当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。
            v-cloak 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像 [v-cloak] { display: none } 这样的 CSS 规则，它可以在组件编译完毕前隐藏原始模板
 */
    setTimeout(() => {
        const app = Vue.createApp({
            data() {
                return {
                    message: "helloVue3"
                }
            }
        })
        app.mount("#app")
    }, 2000)
</script>
</body>
</html>
